<template>
   <div class="platform-home">
      <div style="margin-bottom: 20px">应付账款</div>
      <div class="platform-home-content">
         <!-- 顶部数据卡片 -->
         <div class="platform-home-content-top margin-bottom-10">
            <div class="dashboard-grid">
               <div
                  class="dashboard-card header-card"
                  v-for="item in dashboardData"
                  :key="item.title"
                  v-animate-on-scroll
               >
                  <div class="card-header">
                     <span class="card-title">{{ item.title }}</span>
                     <span class="card-icon">
                        <el-icon
                           :size="30"
                           color="#FFFFFF"
                        >
                           <component :is="item.icon"></component>
                        </el-icon>
                     </span>
                  </div>
                  <div class="card-main">
                     <span class="card-value">
                        <count-to
                           :start-val="0"
                           :end-val="parseFloat(item.value.toString().replace(/,/g, ''))"
                           :duration="1000"
                           :decimal="item.title.includes('金额') ? 2 : 0"
                           :separator="item.title.includes('金额') ? ',' : ''"
                           :autoplay="true"
                        />
                     </span>
                     <span
                        class="card-change"
                        :class="item.change > 0 ? 'up' : item.change < 0 ? 'down' : ''"
                        v-if="item.unit"
                     >
                        {{ item.change > 0 ? "+" : "" }}{{ item.change }}{{ item.unit }}
                     </span>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <!-- 搜索区域 -->
      <div class="page-box">
         <div class="page-search">
            <div
               class="search-box"
               style="height: 40px"
            >
               <el-input
                  v-model="search"
                  placeholder="订单类型/出库单/出库退货单"
                  style="width: 270px; margin-right: 10px"
                  suffix-icon="search"
               />
               <el-select
                  v-model="search"
                  placeholder="客户"
                  style="width: 270px; margin-right: 10px"
               >
                  <el-option
                     v-for="item in 5"
                     :key="item"
                     :label="item"
                     :value="item"
                  />
               </el-select>
               <el-select
                  v-model="search"
                  placeholder="供应商"
                  style="width: 270px; margin-right: 10px"
               >
                  <el-option
                     v-for="item in 5"
                     :key="item"
                     :label="item"
                     :value="item"
                  />
               </el-select>
               <div>
                  <el-date-picker
                     v-model="dateRange"
                     style="width: 250px"
                     type="daterange"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                  />
               </div>
               <div style="margin-left: 20px">
                  <el-button @click="">检索</el-button>
                  <el-button @click="">重置</el-button>
               </div>
            </div>
         </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-box">
         <el-table
            :data="tabeData"
            style="width: 100%"
            v-loading="loading"
            border
         >
            <el-table-column
               align="center"
               prop="rowNumber"
               label="订单类型"
               width="100"
            />
            <el-table-column
               align="center"
               prop="house_type_name"
               label="出库单/出库退货单"
               width="240"
            />
            <el-table-column
               align="center"
               prop="title"
               label="出库/出库退货日期"
               width="240"
            />
            <el-table-column
               align="center"
               prop="category_name"
               label="联系电话"
               width="240"
            />
            <el-table-column
               align="center"
               prop="carport_district_count"
               label="供应商/客户"
               width="auto"
            />
            <el-table-column
               align="center"
               prop="zip"
               label="应付总金额(元)"
               width="auto"
            />
            <el-table-column
               align="center"
               prop="zip"
               label="已付金额(元)"
               width="auto"
            />
            <el-table-column
               align="center"
               prop="zip"
               label="待付金额(元)"
               width="auto"
            />
         </el-table>
      </div>

      <!-- 分页 -->
      <Pagination
         class="pagination"
         @pageSize="pageSize"
         @getPage="getPage"
         :page="pageData.page"
         :page-size="pageData.pageSize"
         :total="total"
      />
   </div>
</template>

<script setup>
   import "swiper/css";
   import { ref, onMounted, nextTick, watch } from "vue";
   import api from "@/api/index.js";
   import CountTo from "../components/CountTo.vue";

   // 自定义指令：元素进入视口时添加动画
   const vAnimateOnScroll = {
      mounted: (el) => {
         const observer = new IntersectionObserver(
            (entries) => {
               entries.forEach((entry) => {
                  if (entry.isIntersecting) {
                     el.classList.add("animate-in");
                     observer.unobserve(el);
                  }
               });
            },
            { threshold: 0.1 }
         );
         observer.observe(el);
      },
   };
   // 仪表盘数据
   const dashboardData = [
      { title: "应付供应商(个)", value: 42, change: "", unit: "", icon: "Histogram" },
      { title: "应付客户(个)", value: 128, change: "", unit: "", icon: "List" },
      { title: "采购应付(元)", value: "300,000.00", change: "", unit: "", icon: "WalletFilled" },
      { title: "出库退货应付(元)", value: 8, change: "", unit: "", icon: "Management" },
      { title: "总应付款金额(元)", value: 9800, change: "", unit: "", icon: "GoodsFilled" },
   ];

   // 页面数据
   const search = ref("");
   const dialogRef = ref(null);
   const dateRange = ref([]);
   const pageData = ref({
      pageSize: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);
   const tabeData = ref([]);
   const loading = ref(false);

   // 监听分页变化
   watch(
      () => pageData.value,
      () => {
         getAlltabeData();
      },
      { deep: true }
   );

   // 分页方法
   const pageSize = (e) => {
      pageData.value.pageSize = e;
   };

   const getPage = (e) => {
      pageData.value.page = e;
   };

   // 获取表格数据
   const getAlltabeData = async () => {
      const res = await api.parking.getAll({
         ...pageData.value,
      });
      if (res.code == 0) {
         tabeData.value = res.data.data;
         total.value = res.data.total;
      }
   };

   // 生命周期钩子
   onMounted(() => {
      getAlltabeData();
      document.querySelector(".platform-home")?.classList.add("page-loaded");
   });
</script>

<style scoped lang="scss">
   .platform-home {
      width: 100%;
      height: 100%;
      font-family: 黑体;
      letter-spacing: 2px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;

      &.page-loaded {
         opacity: 1;
         transform: translateY(0);
      }

      &_header {
         &_right {
            color: #a1a1a1;
         }
      }

      &_content {
         width: 100%;
         height: 100%;
         border: 1px solid blue;
      }
   }

   // 仪表盘卡片样式
   .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 14px;
      margin: 0 auto;
   }

   .dashboard-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      border: 1px solid #f0f0f0;
      padding: 14px 20px 14px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 90px;
      transition: box-shadow 0.2s;
      position: relative;
      opacity: 0;
      transform: translateY(20px);

      &:not(.header-card):hover {
         box-shadow: 0 4px 24px 0 rgba(64, 158, 255, 0.12);
      }
   }

   .card-header {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      margin-bottom: 12px;
   }

   .card-title {
      font-size: 15px;
      color: #666;
      font-weight: 500;
   }

   .card-icon {
      position: absolute;
      right: 14px;
      top: 20px;
      width: 74px;
      height: 74px;
      background: #6860ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .card-main {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 10px;
      // transform: translateX(79px);
      width: 50%;
      margin-bottom: 13px;
   }

   .card-value {
      font-size: 2rem;
      font-weight: bold;
      color: #222;
   }

   .card-change {
      font-size: 1rem;
      margin-left: 6px;
      position: absolute;
      bottom: 7px;
      right: -62px;

      &.up {
         color: #1ecb8c;
      }

      &.down {
         color: #f56c6c;
      }
   }

   // 动画效果
   @keyframes fadeInUp {
      from {
         opacity: 0;
         transform: translateY(20px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes scaleIn {
      from {
         transform: scale(0.95);
         opacity: 0;
      }
      to {
         transform: scale(1);
         opacity: 1;
      }
   }

   // 应用动画
   .animate-in {
      animation: fadeInUp 0.3s forwards;
      @for $i from 1 through 5 {
         &:nth-child(#{$i}) {
            animation-delay: #{$i * 0.05}s;
         }
      }
   }

   // 表格和分页样式
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
      thead {
         color: #444;
      }
   }

   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   // Element Plus 组件样式覆盖
   :deep {
      .el-pagination.is-background .el-pager li.is-active {
         background-color: #000 !important;
      }

      .el-checkbox__input {
         &.is-checked .el-checkbox__inner,
         &.is-indeterminate .el-checkbox__inner {
            background-color: #6860ff;
            border-color: #6860ff;
         }
      }

      .el-checkbox__inner:hover {
         border-color: #626aef !important;
      }

      .el-button:hover {
         background-color: #e2e4fd;
         color: #6860ff;
      }

      .el-input__wrapper:hover {
         box-shadow: inset 0 0 0 1px #6860ff;
      }
   }

   .deepPurple {
      color: #7a60fe;
      margin-left: 10px;
   }

   .amount-statistics {
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 10px 20px;
      background-color: #f2f2f2;
      margin-top: 20px;
      border-radius: 5px;

      &-item {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 20px;
      }
   }
</style>
